<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import dayjs from "dayjs";
import type { DateDataType } from "./index.d";
import { useSettingStore } from "@/stores/index";
import ChatView from "./components/ChatView";
import videojs from "video.js";
import "video.js/dist/video-js.css"; // 引入 Video.js 默认样式
import say from "@/assets/imgs/say.mp4";

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null,
});

const { setSettingShow } = useSettingStore();
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("HH : mm : ss");
    dateData.dateYear = dayjs().format("YYYY-MM-DD");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn();

const dialogVisible = ref(false);
const dialogVisible1 = ref(true);

// 系统介绍动画相关数据
const features = ref([
  { icon: "🎯", text: "专家智能推荐" },
  { icon: "📊", text: "专家数据可视化" },
  { icon: "⚠️", text: "辅助决策与预警" },
  { icon: "📋", text: "政策推送与建议" }
]);

const fullText = "可实现专家智能推荐、专家数据可视化、辅助决策与预警、政策推送与建议，推动人才管理的数字化、智能化升级。";
const displayText = ref("");
const isTyping = ref(false);

const onCloseType = async () => {
  dialogVisible.value = false;
  dialogVisible1.value = false;
};

// 打字机效果
const typewriterEffect = () => {
  if (isTyping.value) return;
  isTyping.value = true;
  displayText.value = "";
  let index = 0;
  
  const typeInterval = setInterval(() => {
    if (index < fullText.length) {
      displayText.value += fullText[index];
      index++;
    } else {
      clearInterval(typeInterval);
      isTyping.value = false;
      // 3秒后重新开始打字效果
      setTimeout(() => {
        // typewriterEffect();
        onCloseType()
      }, 3000);
    }
  }, 100);
};

// 启动动画序列
const startIntroAnimation = () => {
  // 延迟启动打字机效果
  setTimeout(() => {
    typewriterEffect();
  }, 2000);
};

onMounted(() => {
  nextTick(() => {
    initVideo();
    startIntroAnimation();
  });
});
const initVideo = () => {
  // if (!props.pull) return
  const player = videojs("my-video1", {
    // bigPlayButton: true, //是否显示播放按钮
    // autoplay:false, // 是否自动播放
    // controls:true,
    // sourceOrder: true,
    // controlBar: false,
    // poster: props.coverImage,
    // fluid: false, // 自适应宽高
    muted: true,
    // poster: say,
    preload: "auto", // 预加载
    controls: false, //视频控件
    autoplay: true, //自动播放
    loop: true, // 循环播放
    techOrder: ["html5"], // 兼容顺序 'flash',
    sources:
      // {
      //   src: ming,//播放视频地址
      //   type: 'application/x-mpegURL',//播放m3u8需要设置的格式
      // }
      {
        src: say, //播放视频地址
        type: "video/mp4", //播放m3u8需要设置的格式
      },

    controlBar: {
      remainingTimeDisplay: {
        displayNegative: true,
      },
    },
    playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
  });

  // 监听视频结束事件，确保连续播放
  player.ready(() => {
    player.on('ended', () => {
      // 视频结束后立即重新开始播放
      player.currentTime(0);
      player.play();
    });

    // 监听播放错误，确保播放连续性
    player.on('error', () => {
      console.log('视频播放出错，尝试重新播放');
      setTimeout(() => {
        player.currentTime(0);
        player.play();
      }, 1000);
    });

    // 确保视频始终在播放状态
    player.on('pause', () => {
      // 如果视频被暂停，自动重新播放
      setTimeout(() => {
        if (player.paused()) {
          player.play();
        }
      }, 100);
    });

    // 监听视频加载完成，确保自动播放
    player.on('loadeddata', () => {
      if (player.paused()) {
        player.play();
      }
    });

    // 定期检查播放状态，确保连续播放
    // setInterval(() => {
    //   if (player.paused() && !player.ended()) {
    //     player.play();
    //   }
    // }, 5000); // 每5秒检查一次
  });
};
</script>

<template>
  <div class="d-flex jc-center title_wrap">
    <!-- <div class="zuojuxing"></div>
    <div class="youjuxing"></div> -->
    <!-- <div class="guang"></div> -->
    <div class="d-flex jc-center">
      <div class="title">
        <!-- <span class="title-text">专家小李达</span> -->
        <span class="title-text1">“小李”识才</span>

        <span @click="dialogVisible = true" class="title-icon"></span>
      </div>
    </div>
    <div class="timers1">
      <div class="timers1-hms">
        {{ dateData.dateDay }}
      </div>
      <div class="timers1-date">
        <div>{{ dateData.dateWeek }}</div>
        <div>{{ dateData.dateYear }}</div>
      </div>
    </div>

    <div class="timers">
      <!-- {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }} -->

      <div class="setting_icon" @click="setSettingShow(true)">
        <img src="@/assets/img/headers/setting.png" alt="设置" />
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible1"
      width="660"
      align-center
      @close="onCloseType"
    >

      <div class="say-robbot intro-container">
        <div class="video-wrapper">
          <video
            ref="Playe1"
            id="my-video1"
            class="video-js vjs-big-play-centered vjs-default-skin videotu video-intro"
            playsinline="true"
            x-webkit-airplay="allow"
          ></video>
            <img src="../assets/imgs/say.gif" style="height: 200px;width: 200px" alt="">
          <div class="video-overlay">

            <div class="loading-spinner"></div>
          </div>
        </div>
        <div class="intro-content">
          <div class="intro-title">
            <span class="title-highlight">"小快灵"</span>
            <span class="title-main">智能辅助专家推荐AI场景</span>
          </div>
          <div class="intro-features">
            <div class="feature-item" v-for="(feature, index) in features" :key="index" :style="{ animationDelay: (index * 0.3) + 's' }">
              <div class="feature-icon">{{ feature.icon }}</div>
              <div class="feature-text">{{ feature.text }}</div>
            </div>
          </div>
          <div class="intro-description typewriter">
            {{ displayText }}
            <span class="cursor">|</span>
          </div>
        </div>
      </div>
      <!-- <div class="dialog-content">
        <div class="dialog-content-left"></div>
        <div class="dialog-content-right">
          <div class="dialog-content-right-one">小李识才 AI 助手</div>
          <div class="dialog-content-right-two">
            <div>专家智能推荐</div>
            <div>专家数据可视化</div>
            <div>辅助决策与预警</div>
            <div>政策推送与建议</div>
          </div>
          <div class="dialog-content-right-three">
            “小快灵”智能辅助专家推荐AI场景，可实现专家智能推荐、专家数据可视化、辅助决策与预警、政策推送与建议，推动人才管理的数字化、智能化升级。
          </div>
        </div>
      </div> -->
    </el-dialog>

    <el-drawer
      v-model="dialogVisible"
      size="950"
      direction="rtl"
      :show-close="false"
      @close="onCloseType"
    >
      <template #header>
        <div class="dialog-content">
          <div class="dialog-content-left"></div>
          <div class="dialog-content-right">
            <div class="dialog-content-right-one">小李识才 AI 助手</div>
            <div class="dialog-content-right-two">
              <div>专家智能推荐</div>
              <div>专家数据可视化</div>
              <div>辅助决策与预警</div>
              <div>政策推送与建议</div>
            </div>
            <div class="dialog-content-right-three">
              “小快灵”智能辅助专家推荐AI场景，可实现专家智能推荐、专家数据可视化、辅助决策与预警、政策推送与建议，推动人才管理的数字化、智能化升级。
            </div>
          </div>
        </div>
      </template>
      <ChatView />
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
::v-deep(.el-drawer) {
  background-color: rgba(16, 36, 58, 0.8);
}
::v-deep(.el-dialog) {
  background-color: rgba(16, 36, 58, 0.8);
  height: 100%;
  width: 100%;
}
.title_wrap {
  height: 60px;
  // background-image: url("../assets/img/top.png");
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;

  .guang {
    position: absolute;
    bottom: -26px;
    // background-image: url("../assets/img/guang.png");
    background-position: 80px center;
    width: 100%;
    height: 56px;
  }

  .zuojuxing,
  .youjuxing {
    position: absolute;
    top: -2px;
    width: 140px;
    height: 6px;
    // background-image: url("../assets/img/headers/juxing1.png");
  }

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .timers {
    position: absolute;
    left: -10px;
    top: 4px;
    font-size: 18px;
    display: flex;
    align-items: center;
    z-index: 999;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .timers1 {
    position: absolute;
    right: 72px;
    top: 58px;
    display: flex;
    .timers1-hms {
      font-weight: 500;
      font-size: 26px;
      color: #ffffff;
      line-height: 39px;
      margin-right: 32px;
    }
    .timers1-date {
      font-weight: 400;
      font-size: 12px;
      color: #a4c6e6;
      line-height: 18px;
    }
  }
}
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    width: 100%;
    background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .title-text1 {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    width: 100%;
    font-family: YouSheBiaoTiYuan;
    font-size: 54px;
    color: #ffffff;
    line-height: 70px;
    text-align: center;
    font-style: normal;
  }

  .title-icon {
    background-image: url("@/assets/imgs/top15.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 54px;
    height: 60px;
    display: inline-block;
    transform: translateY(12px);
    margin-left: 20px;
  }
}

.dialog-content {
  // background-color: rgba(16, 36, 58, 0.8);
  display: flex;
  .dialog-content-left {
    width: 100px;
    height: 68px;
    background-image: url("@/assets/imgs/u5.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 16px;
  }
  .dialog-content-right {
    .dialog-content-right-one {
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: rgba(2, 167, 240, 0.99);
      line-height: 30px;
      padding: 2px 10px 10px 10px;
    }
    .dialog-content-right-two {
      display: flex;
      margin-bottom: 16px;
      > div {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #ff8a00;
        text-align: center;
        padding: 0px 5px 0px 5px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(50, 95, 143, 1);
        margin-right: 16px;
      }
    }
    .dialog-content-right-three {
      font-family: "Arial Normal", "Arial";
      font-weight: 400;
      font-style: normal;
      font-size: 15px;
      color: #f2f2f2;
      line-height: 30px;
    }
  }
}

.say-robbot {
  .videotu{
      width: 0px;
      height: 0px;
    }
}

// 系统介绍动画样式
.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  animation: slideInFromTop 1s ease-out;
}

.video-wrapper {
  position: relative;
  margin-bottom: 30px;
  animation: fadeInScale 1.5s ease-out;
  
  .videotu {
    width: 0px;
    height: 0px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }
  }
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);

  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #00eaff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

.intro-content {
  text-align: center;
  max-width: 500px;
  animation: slideInFromBottom 1.2s ease-out 0.5s both;
}

.intro-title {
  margin-bottom: 25px;
  
  .title-highlight {
    font-size: 24px;
    font-weight: bold;
    color: #00eaff;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
    animation: glow 2s ease-in-out infinite alternate;
  }
  
  .title-main {
    font-size: 18px;
    color: #ffffff;
    margin-left: 10px;
    animation: fadeIn 1s ease-out 0.8s both;
  }
}

.intro-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 25px;
  
  .feature-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(0, 234, 255, 0.1), rgba(0, 114, 255, 0.1));
    border: 1px solid rgba(0, 234, 255, 0.3);
    border-radius: 8px;
    animation: slideInFromLeft 0.8s ease-out both;
    transition: all 0.3s ease;
    
    &:hover {
      background: linear-gradient(135deg, rgba(0, 234, 255, 0.2), rgba(0, 114, 255, 0.2));
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 234, 255, 0.2);
    }
    
    .feature-icon {
      font-size: 20px;
      margin-right: 10px;
      animation: bounce 1s ease-in-out infinite;
    }
    
    .feature-text {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
    }
  }
}

.intro-description {
  font-size: 16px;
  color: #f2f2f2;
  line-height: 1.6;
  text-align: left;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 4px solid #00eaff;
  position: relative;
  animation: fadeIn 1s ease-out 1.5s both;
  
  .cursor {
    animation: blink 1s infinite;
    color: #00eaff;
    font-weight: bold;
  }
}

// 关键帧动画
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(0, 234, 255, 0.8), 0 0 30px rgba(0, 234, 255, 0.3);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
